<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        body{
            background-color: #ccc;
        }
        #app{
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border:4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
            padding:1em 2em 2em;
        }
        h3{
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <h3>v-on 修饰符</h3>
        <div v-on:click="hClickDiv">
            div
            <button @click="hClickBtn">按钮</button>
            <br>
            <button v-on:click.stop="hClickBtn">点击按钮不会冒泡</button>
            <br>
            <a href="http://www.baidu.com" v-on:click="hClickA">百度</a>
            <br>
            <a href="http://www.baidu.com" v-on:click.prevent="hClickA">不跳转百度</a>
        
            <br>
            <a href="http://www.baidu.com" v-on:click.prevent.stop="hClickA">不跳转百度不冒泡</a>
        
        </div>    
     
    </div>
    <script>
        // vue中的事件也有冒泡机制。
        // 在子元素上的点击事件，也会触发父元素上的点击事件。
        
        // 如果要阻止冒泡，只需给事件添加个修饰符.stop
        //     格式： 事件名.stop
        //     示例：click.stop

        // 如果要阻止默认行为，只需给事件添加个修饰符.prevent
        //     格式： 事件名.prevent
        //     示例：click.prevent

        // 如果需要，也可以一起使用，相当于两个效果叠加
        //     格式： 事件名.prevent.stop
        //     示例：click.prevent.stop

        // v-on: ----简写成---> @

        const vm = new Vue({
            el: "#app",
            methods: {
                hClickDiv () {
                    console.log("hClickDiv")
                },
                hClickBtn (){
                    console.log("hClickBtn")
                },
                hClickA () {
                    console.log('hClickA')
                }
            }
        })
       
    </script>

</body>
</html>